<template>
	<view class="add">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate uni-navigate-right" @tap="showMask = true">
					<view>收款帐号</view>
					<view  class="type-name text-gray" v-if="account_index == null">
						请选择
					</view>
					<view class="type-name text-gray" v-else>
						{{accounts[account_index]['name']}} {{accounts[account_index]['account_no']}}
					</view>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate">
					<view class="iconfont icon-jine"></view>
					<input type="digit" placeholder="提现金额" v-model="amount" />
				</view>
			</view>
		</view>
		
		<view class="radius-btn" @tap="saveForm()">保存</view>
		
		<mask-select :show="showMask" @hidePopup="hideMask">
			<view class="uni-list">
				<view class="uni-list-cell" @tap.stop="selectAccount(item, index)" v-for="(item,index) in accounts" :key="index">
					<view class="uni-list-cell-navigate account-item">
						<view class="logo">
							<image :src="item.logo_image" mode=""></image>
						</view>
						<view class="info">
							<view>{{item.name}}【{{item.account_name}}】</view>
							<view>{{item.account_no}}</view>
						</view>
						<view class="select-icon">
							<image :src="index == account_index?'/static/icon/selected.png':'/static/icon/she.png'"></image>
						</view>
					</view>
				</view>
			</view>
		</mask-select>
		
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import maskSelect from '../../components/mask-select.vue';
	
	
	export default {
		components: {
			maskSelect
		},
		data() {
			return {
				amount: '',
				accounts:[],
				account_index: null,
				showMask:false,
				
			};
		},
		onLoad() {
			this.getAccounts();
		},
		methods: {
			getAccounts: function(){
				var url =  'funds/account';
				var that = this;
				Request.send({
					url: url,
					sCallback: function(res) {
						that.accounts = res.data;
					}
				})
			},
			saveForm:function(){
				if(this.account_index == null) {
					Request.alert('请选择收款帐号');
					return;
				}


				if(!this.amount || this.amount <= 0) {
					Request.alert('请填写提现金额');
					return;
				}



				var url =  'funds/withdraw';
				var that = this;
				Request.send({
					url: url,
					data: {
						amount:that.amount, 
						account_id: that.accounts[that.account_index]['id'],
					},
					sCallback: function(res) {
						uni.showToast({
							title: res.msg,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
				})

			},

			//选择银行
			selectAccount: function(item, index){
				this.account_index = index;
				this.showMask = false;
			},
			hideMask() {
				this.showMask = false;
			}
		}
	}
</script>

<style>
	.add{
		font-size: 28upx;
	}
	
	.add .type-name{
		padding-right: 20upx;
	}
	
	.add .radius-btn{
		margin-top: 70upx;
	}
	
	.add picker{
		margin-right: 20upx;
	}
	
	.add .iconfont{
		width: 80upx;
		font-size: 40upx;
	}
	
	.add input{
		flex: 1;
	}
	
	.account-item{
		align-items: center;
	}
	
	.account-item .logo, .account-item .select-icon{
		display: flex;
		align-items: center;
	}
	
	.account-item .logo image{
		width: 60upx;
		height: 60upx;
		margin-right: 20upx;
	}
	
	.account-item .select-icon image{
		width: 60upx;
		height: 60upx;
	}
	
	.account-item .info{
		display: flex;
		justify-content: flex-start;
		flex: 1;
		flex-direction: column;
	}
</style>
